
function printShopPageAllComponents(data) {
	
	var jq = jQuery.noConflict();	
	var page = "";	
	
	page = page + "<div id='itemsInShop' >";
	
	page = page +  "<table class='table table-hover table-condensed'> " + 
			    "<caption>List of Components</caption> " + 
			    "<thead> " +
			        "<tr> " + 
			            "<th>Component name</th> " +
			            "<th>Type</th> " +
			            "<th>Energy to turn on</th> " +
			            "<th>Price</th> " +
			            "<th>Actions</th> " +
			        "</tr> " +
			    "</thead> " +
			    "<tbody> ";	
					for(var i = 0; i < data.components.length; i++) {
						page = page + 	"<tr>" +
											"<td>" + data.components[i].componentName + "</td>" +
											"<td>" + data.components[i].componentType + "</td>" +
											"<td>" + data.components[i].energyToTurnOn + "</td>" +
											"<td>" + data.components[i].price + "</td>" +
											
											"<td> " +
						                    "<span onmouseover='javascript:showDiv(" + data.components[i].idComponent + ", event)' " +
						                          "onmouseout='javascript:hiddenDiv(" + data.components[i].idComponent + ")'> " +
						                        "<i class='icon-eye-open' ></i> " + 
						                    "</span> " +
						                    "<a href='#'><i class='icon-plus'></i></a> " + 
						                "</td> " +
											
										"</tr>";
						
						
						
						if(data.components[i].componentType.match('Firewall') ) {     
							page = page +
				                "<div id=" + data.components[i].idComponent + " class=div_info_hidden >" +
				                "<div class=arrow></div>" +
				                    "<h3 class=popover-title>" + data.components[i].componentName + "</h3>" +
				                    "<div class=popover-content>" +  
				                        "<ul> " +                      
				                            "<li>Component type   : " + data.components[i].componentType + "</li>" +
				                            "<li>Energy to turn on: " + data.components[i].energyToTurnOn + "</li>" + 
				                            "<li>Price            : " + data.components[i].price + "</li>" +
				                            "<li>Access difficult : " + data.components[i].dificultAccess + "</li>" +
				                        "</ul> " +
				                    "</div>" +
				                "</div>";
						}
						
						if(data.components[i].componentType.match('HardDisk')) {     
							page = page +
				                "<div id=" + data.components[i].idComponent + " class=div_info_hidden >" +
				                "<div class=arrow></div>" +
				                    "<h3 class=popover-title>" + data.components[i].componentName + "</h3>" +
				                    "<div class=popover-content>" +  
				                        "<ul> " +                      
				                            "<li>Component type   : " + data.components[i].componentType + "</li>" +
				                            "<li>Energy to turn on: " + data.components[i].energyToTurnOn + "</li>" + 
				                            "<li>Price            : " + data.components[i].price + "</li>" +
				                            "<li>Total capacity   : " + data.components[i].totalCapacity + "</li>" +
				                        "</ul> " +
				                    "</div>" +
				                "</div>";
						}
						
						if(data.components[i].componentType.match('NetworkCard')) {     
							page = page +
				                "<div id=" + data.components[i].idComponent + " class=div_info_hidden >" +
				                "<div class=arrow></div>" +
				                    "<h3 class=popover-title>" + data.components[i].componentName + "</h3>" +
				                    "<div class=popover-content>" +  
				                        "<ul> " +                      
				                            "<li>Component type   : " + data.components[i].componentType + "</li>" +
				                            "<li>Energy to turn on: " + data.components[i].energyToTurnOn + "</li>" + 
				                            "<li>Price            : " + data.components[i].price + "</li>" +
				                            "<li>Speed connection : " + data.components[i].speedConection + "</li>" +
				                        "</ul> " +
				                    "</div>" +
				                "</div>";
						}
						
						if(data.components[i].componentType.match('PowerSupply')) {     
							page = page +
				                "<div id=" + data.components[i].idComponent + " class=div_info_hidden >" +
				                "<div class=arrow></div>" +
				                    "<h3 class=popover-title>" + data.components[i].componentName + "</h3>" +
				                    "<div class=popover-content>" +  
				                        "<ul> " +                      
				                            "<li>Component type   : " + data.components[i].componentType + "</li>" +
				                            "<li>Energy to turn on: " + data.components[i].energyToTurnOn + "</li>" + 
				                            "<li>Price            : " + data.components[i].price + "</li>" +
				                            "<li>Generated energy : " + data.components[i].generatedEnergy + "</li>" +
				                        "</ul> " +
				                    "</div> " +
				                "</div>";
						}
						
						if(data.components[i].componentType.match('RamMemory')) {     
							page = page +
				                "<div id=" + data.components[i].idComponent + " class=div_info_hidden >" +
				                "<div class=arrow></div>" +
				                    "<h3 class=popover-title>" + data.components[i].componentName + "</h3>" +
				                    "<div class=popover-content>" +  
				                        "<ul> " +                      
				                            "<li>Component type   : " + data.components[i].componentType + "</li>" +
				                            "<li>Energy to turn on: " + data.components[i].energyToTurnOn + "</li>" + 
				                            "<li>Price            : " + data.components[i].price + "</li>" +
				                            "<li>Capacity         : " + data.components[i].totalCapacity + "</li>" +
				                        "</ul> " +
				                    "</div>" +
				                "</div>";
						}
						
						if(data.components[i].componentType.match('Processor')) {     
							page = page +
				                "<div id=" + data.components[i].idComponent + " class=div_info_hidden >" +
				                "<div class=arrow></div>" +
				                    "<h3 class=popover-title>" + data.components[i].componentName + "</h3>" +
				                    "<div class=popover-content>" +  
				                        "<ul> " +                      
				                            "<li>Component type   : " + data.components[i].componentType + "</li>" +
				                            "<li>Energy to turn on: " + data.components[i].energyToTurnOn + "</li>" + 
				                            "<li>Price            : " + data.components[i].price + "</li>" +
				                            "<li>Speed for core   : " + data.components[i].speedForCore + "</li>" +
				                            "<li>Cores            : " + data.components[i].cores + "</li>" +
				                        "</ul> " +
				                    "</div>" +
				                "</div>";
						}
		            		             		
					}
			    page = page + "</tbody> " + 
			    			"</table>";
			                

			    page = page + 
				"<div class='pagination'> " +
			    "<ul> ";
			        	if(data.currentIndex == 1) {
			        		page = page +  
			                "<li class='disabled'><a href='#'>&lt;&lt;</a></li> " +
			                "<li class='disabled'><a href='#'>&lt;</a></li>";
			        	} else {
			        		page = page +
			                "<li><a href='#' onclick='javascript:ajaxPages(1)'>&lt;&lt;</a></li> " +
			                "<li><a href='#' onclick='javascript:ajaxPages(" + (data.currentIndex - 1) + ")'>&lt;</a></li> ";
			        	}
			       

			        for(var i = data.beginIndex; i <= data.endIndex; i++ ) {
			        	
			        		if(i == data.currentIndex ) {			       
			                	page = page +
			                    "<li class='active'><a href='#' onclick='javascript:ajaxPages(" + i +")' >" + i + "</a></li> ";
			        		} else {
			        			page = page +
			                    "<li><a href='#' onclick='javascript:ajaxPages(" + i + ")' >" + i + "</a></li> ";
			        		}
			        }
			     
			        if(data.currentIndex == data.totalPages ) {
			        	page = page +
			                "<li class='disabled'><a href='#'>&gt;</a></li> " +
			                "<li class='disabled'><a href='#'>&gt;&gt;</a></li>";
			        } else {
			        	page = page +
			                "<li><a href='#' onclick='javascript:ajaxPages(" + (data.currentIndex + 1) + ")'>&gt;</a></li> " +
			                "<li><a href='#' onclick='javascript:ajaxPages(" + data.totalPages + ")'>&gt;&gt;</a></li>";
			        }
			    page = page +    
			    "</ul> " +
			"</div>";
		
	page = page + "</div>";
	
	jq("#itemsInShop").replaceWith(page);
	
	
}

function ajaxShopPages(numPage) {
	var pageUrl = document.URL.replace(location.protocol + "//" + location.host + "/", "").split("/")[0];
	var pageUrl2 = "/" + pageUrl + "/ajax/shop/pages/" + numPage;
		
	jQuery.ajax({
		type : "POST",
		url : pageUrl2,
		dataType:'json',
		contentType : 'application/json',
		success : function(data) {	
			printShopPageAllComponents(data);
		},
		error : function(data) {
			alert("Se ha producido un error!");
		},		
	});
}

function ajaxBuyComponent(userId, idComponent) {
	
	var pageUrl = document.URL.replace(location.protocol + "//" + location.host + "/", "").split("/")[0];
	var pageUrl2 = "/" + pageUrl + "/ajax/shop/buy/"+userId+"/"+idComponent;
	
	jQuery.ajax({
		type : "POST",
		url : pageUrl2,
		dataType:'json',
		contentType : 'application/json',		
		success : function(data) {	
			alert("sucess");
		},
		error : function(data) {
			alert("Se ha producido un error!");
		},		
	});
}






